<template>
  <view class="moreOrderDetail">
    <view class="list-bg list-group-row flexBox orderStatus">
      <view class="status">
        {{ statusAllList[integralOrder.orderStatus]|| '' }}
      </view>
    </view>
    <view class="list-bg list-group-row flexBox address">
      <image src="/static/image/dash_line.png" class="lineBg" />
      <image src="/static/image/location.png" class="addressImg" />
      <view class="address_right">
        <text>{{ integralOrder.address }}</text>
        <view class="detail" />
        <text>{{ integralOrder.customerName || '' }} {{ integralOrder.customerPhone || '' }}</text>
      </view>
    </view>
    <view class="list-bg list-group-row">
      <view class="itemShop">
        <image :src="integralSku.productImages" />
        <view class="shopInfo">
          <view class="title">{{ integralSku.skuName }}</view>
          <view class="code">编码：{{ integralSku.skuId }}</view>
          <view class="price">
            <view class="speci">
              <text class="points-num">{{ integralOrder.exchangeType == 0?integralOrder.exchangeIntegral: integralOrder.exchangeCoin }}</text><text class="points-unit">{{ integralOrder.exchangeType == 0?'积分':'鑫币' }}</text>
            </view>
            <text class="buyyer-count">×{{ integralOrder.productNumber }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="list-bg list-group-row">
      <view class="list-title">订单信息</view>
      <view class="group-info">
        <MenuCell
          :cell-data.sync="integralOrder"
          :cell-column="orderCellColumn"
        />
      </view>
    </view>
    <view class="list-bg list-group-row">
      <view class="list-title">物流信息</view>
      <view class="group-info">
        <MenuCell
          :cell-data.sync="orderShipmentInfo"
          :cell-column="LogisticsInformationColumn"
          @handelCellMethod="goLogisFn"
        />
      </view>
    </view>
    <!-- 底部按钮栏 -->
    <PageFooterBar
      only-btn
      :btn-list="btnList"
      :style="{'display':displayNone}"
      @click="() => { typeBtn(orderStatus,optionorderId) }"
    />
    <u-modal
      :show="modalShowClose"
      :show-confirm-button="false"
      title="是否取消"
    >
      <view class="slot-content">
        <view class="btn-box">
          <button
            class="btn cancel-btn btn-boundless"
            :plain="true"
            @click="cancelModalFn"
          >
            取消
          </button>
          <button
            class="btn confirm-btn"
            @click="confirmModalFn"
          >
            确定
          </button>
        </view>
      </view>
    </u-modal>
    <canclePop :cancle-show.sync="cancleShow" :cancle-params.sync="cancleParams" @cancelCom="cancelCom" />
  </view>
</template>

<script>
import { cancleOrder, applyrefund, confrimRece} from '@/api/orderApi';
import canclePop from '@/components/order-list/canclePop';
import { detailByOrderNo, cancelOrder } from '@/api/yc_userInfo'
import MenuCell from '@/components/menu-cell'
import PageFooterBar from '@/components/page-footer-bar'
const labelStyle = 'font-size: 28rpx;color: #666;'
const contentStyle = 'padding-right: 24rpx;font-size: 28rpx;color: #000;'
const orderCellColumn = [
  {
    label: '兑换订单号',
    labelStyle,
    fields: ['orderNo'],
    contentStyle,
  },
  {
    label: '兑换时间',
    labelStyle,
    fields: ['addTime'],
    contentStyle,
  },
  {
    label: '支付方式',
    labelStyle,
    fields: ['settleWay'],
    contentStyle,
  },
  {
    label: '扣除积分',
    labelStyle,
    fields: ['exchangeIntegral'],
    contentStyle,
  },
]
const LogisticsInformationColumn = [
  {
    label: '配送方式',
    labelStyle,
    fields: ['deliverWay'],
    contentStyle,
  },
  {
    label: '配送公司',
    labelStyle,
    fields: ['expressName'],
    contentStyle,
  },
  {
    label: '快递单号',
    labelStyle,
    fields: ['expressCode'],
    contentStyle,
  },
  {
    label: '暂无信息',
    labelStyle,
    fields: ['expressTrackTime'],
    contentStyle,
    showRightIcon: true,
    methodName: 'goLogisFn',
  },
]
export default {
  components: {
    MenuCell,
    PageFooterBar,
    canclePop
  },
  data() {
    return {
      orderStatus: '',
      orderSource:'',// 订单来源 0:百分汇 2:自有商品
      orderCellColumn,
      LogisticsInformationColumn,
      orderShipmentInfo: {},
      platform: '',
      integralSku: {},
      integralOrder: {},
      addressInfo: {},
      btnList: [],
      optionorderId: '',
      modalShowClose: false,
      statusAllList: {
        '50': '待发货',
        '60': '待收货',
        '120': '待发货（已申请取消）',
        '130': '待收货（已申请取消）',
        '80': '已完成',
        '140': '已完成（已申请售后）',
        '100': '订单取消',
        '110': '交易关闭',
      },
      displayNone: 'block',
      cancleShow: false, // 
      cancleParams: {},
      order_id:'',//自有商品取消的订单号
      skuId:'',
      isAfterSales:false, //取消原因根据这个字段区分
      actualStatus:'',//订单状态
      productId:'',
    }
  },
  onLoad(option) {
    const { orderId } = option
    this.optionorderId = orderId
    this.getPlat()
    this.integralDetail(orderId)
  },
  onShow() {
    console.log('22222222')
    this.integralDetail(this.optionorderId)
  },
  //操作按钮 取消订单  申请售后 确认收货
  /*
  第三方订单：不能取消订单 不显示取消订单按钮
  自有商品：待发货状态显示取消订单按钮 逻辑直接走取消售后页面
  第三方订单:已完成状态下显示申请售后
  自有商品：不能申请售后 不显示申请售后按钮
  自有商品：待收货60显示确认收货 第三方订单不能确认收货
  */
  methods: {
    getPlat() { // 获取平台值
      const { accountType = 20 } = this.vuex_memberInfo || {}
      switch (accountType) { //  账户类型：10:签约用户；20:普通用户;30认证用户;39普通会员-分销;40分销用户；
        case 10:
          this.platform = 10
          break
        case 20:
          this.platform = 20
          break
        case 30:
          this.platform = 20
          break
        case 39:
          this.platform = 30
          break
        case 40:
          this.platform = 30
          break
        default:
          this.platform = 20
          break
      }
    },
    integralDetail(orderNo) { // 订单详情获取
    const params ={
          orderNo: orderNo
    }
      detailByOrderNo(params).then((res) => {
        const integralOrdersettleWay = {
          'settleWay': '积分抵扣'
        }
        const xinOrdersettleWay = {
          'settleWay': '鑫币抵扣'
        }
        if (res) {
          const {
            integralSku,
            integralOrder,
            orderShipmentInfo
          } = res.data
          this.integralSku = integralSku
          console.log('点击进入订单详情',integralOrder.exchangeType)
          if (integralOrder.exchangeType == 0) {
            this.integralOrder = { ...integralOrder, ...integralOrdersettleWay }
          } else {
            this.orderCellColumn[3].label = '扣除鑫币'
            this.orderCellColumn[3].fields = ['exchangeCoin']
            this.integralOrder = { ...integralOrder, ...xinOrdersettleWay }
          }

          this.orderStatus = this.integralOrder.orderStatus // 订单状态
          this.orderSource = this.integralOrder.orderSource  // 订单来源orderSource 0:百分汇 2:自由商品
          this.actualStatus = this.integralOrder.actualStatus
          this.skuId = this.integralSku.productId
          this.productId =this.integralSku.productId
          if (this.orderSource  ==2 && (this.orderStatus == 20 ||this.orderStatus == 40 || this.orderStatus == 50 ) ) { //第三方订单不显示取消订单按钮    自有商品订单 待发货 状态下显示取消订单按钮
            this.btnList = [{ name: '取消订单', isLinearBg: true }]
          }else if(this.orderSource  ==2 && this.orderStatus == 60){
            this.btnList = [{ name: '确认收货', isLinearBg: true }]
            console.log('底部按钮',this.btnList)
          } else if (this.orderStatus == 80 && this.orderSource ==0) { //第三方订单申请售后   自有商品订单不能 申请售后
            this.btnList = [{ name: '申请售后', isLinearBg: true }]
          } else if ((this.orderStatus == 130 || this.orderStatus == 140) && this.orderSource ==0) {
            this.btnList = [{ name: '查看售后详情', isLinearBg: true }]
          } else {
            this.displayNone = 'none'
          }
          if (orderShipmentInfo) {
            const expressTrackTime = {
              'expressTrackTime': orderShipmentInfo.expressTrack[0].time
            }
            this.orderShipmentInfo = { ...orderShipmentInfo, ...expressTrackTime }
          }
          this.LogisticsInformationColumn[3].label = this.orderShipmentInfo.expStatusName ? this.orderShipmentInfo.expStatusName : '暂无信息'
           
        }
      })
    },
    typeBtn(statusCode) {
      // 底部按钮操作 // 订单来源orderSource 0:百分汇=第三方 2:自有商品
      // 取消按钮-------第三方订单=不显示取消按钮   自有商品订单 =待发货状态的显示取消按钮
      // 申请售后-------第三方订单=已完成状态显示   自有商品订单不能申请售后
      // 确认收货按钮 ---------自有商品=待收货60 显示  第三方订单不能取消订单
      const { orderNo, orderType, orderSn, skuId, orderSource } = this.integralOrder
      // if (statusCode == 1) { //取消申请操作
      //   this.modalShowClose = true
      // }
      // if (statusCode == 2) {
      //   //待收货的走申请流程
      //   uni.navigateTo({ url: `/myAccount/pointsMall/afterSalesService?orderId=${orderNo}&nature=${orderType}&orderSn=${orderSn}&skuId=${skuId}` })
      // }
      if(orderSource ==2 && (statusCode == 20 ||statusCode == 40 ||statusCode == 50)){
        this.cancleShow = true  //自有商品取消原因
        this. ZYCancellationFn(orderSn)
      }
      if(orderSource ==2 && statusCode ==60){
        //自有商品确认收货
        this.confrimRece()
      }
      if (orderSource ==0 && statusCode == 80) { //申请售后操作
        uni.navigateTo({ url: `/myAccount/pointsMall/afterSalesService?orderId=${orderNo}&nature=${orderType}&orderSn=${orderSn}&skuId=${skuId}` })
      }
      if (orderSource ==2 && (statusCode == 130 || statusCode == 140)) { //查看申请售后详情
        uni.navigateTo({ url: `/myAccount/pointsMall/afterSalesServiceDetail?orderSn=${orderSn}` })
      }
    },
    // 申请取消确定
    confirmModalFn(val) {
      const { orderSn } = this.integralOrder
      const params = {
        orderSn: orderSn
      }
      cancelOrder(params).then((res) => {
        if (res.code == 0) {
          this.integralDetail(this.optionorderId)
          this.cancelModalFn()
        } else {
          this.$u.toast(res.msg)
        }
      })
    },
    cancelModalFn() {
      this.modalShowClose = false
    },
    async confrimRece() { // 确认收货
    const { orderSn } = this.integralOrder
      const res = await confrimRece({ order_id: orderSn })
      this.$u.toast(res.msg)
      this.integralDetail(_this.optionorderId)
    },
    goLogisFn(val) {
      const { expressCode, expressName } = this.orderShipmentInfo
      const { orderSn } = this.integralOrder
      if (!expressCode || !expressName) {
        this.$u.toast('暂无物流信息')
        return
      }
      if(this.orderSource == 2){//自有商品 //自有商品物流走快递100
        uni.navigateTo({url: '/orders/logisticsInfo/index?orderNo=' + orderSn});
        return
      }
      if(this.orderSource == 0){
        uni.navigateTo({ url: `/myAccount/pointsMall/logisticsInformation?nums=${expressCode}&orderSn=${orderSn}` })
      }
    },
    //自有商品==鸿鹄订单 取消按钮操作
    ZYCancellationFn(orderSn){
      this.cancleShow =true
      this.order_id =orderSn 
      const { loginAccount, memberId} = this.vuex_memberInfo
      if(this.actualStatus == 20){
        this.cancleParams ={cancle_order_status:this.actualStatus,cancle_role:10,cancle_name:loginAccount,order_id:this.order_id}
      }else{
        this.isAfterSales =true
        this.cancleParams ={
        order_id:this.order_id,
        listOrderRefundItems:[{sku_id:this.productId,refund_count:1}],
        return_desc:'',
        operate_role:10, 
        operate_userid: memberId,
        operate_username: loginAccount,
        actual_refund_type: 1,
      }
      }
      console.log('点击自由商品取消',this.cancleParams)
    },
    async cancelCom() { // 自有商品取消订单
       const _this =this
      console.log('自有商品取消入参',this.cancleParams)
      const res = this.actualStatus ==20 ? await cancleOrder(this.cancleParams) :  await applyrefund(this.cancleParams)
      const toast = () => this.$u.toast('取消成功')
      setTimeout(function(){
      if (res.code == 0) {
        _this.cancleShow = false
        _this.integralDetail(_this.optionorderId)
        _this.cancleParams = {} // 清空选择
      } else {
        _this.$u.toast(res.message)
      }
      },5000)
      // if (res.code == 0) {
      //   this.cancleShow = false
      //   this.cancleParams = {} // 清空选择
      //   this.integralDetail(this.optionorderId)
      // } else {
      //   this.$u.toast(res.message)
      // }
    },
  }
}
</script>

<style>
</style>
<style scoped lang="scss">
.time {
  color: #FF5533;
  margin-top: 8rpx;
}
.moreOrderDetail {
  padding: 0 0 160rpx 0;
  .orderStatus {
    justify-content: center;
    padding: 20rpx 0rpx;
    flex-direction: column;
    border-radius: $uni-border-radius-default;
    .status {
      display: flex;
      align-items: center;
      align-content: center;
      color: $uni-orange;
      font-size: $uni-font-size-base;
      font-weight: bold;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
    .tips {
      color: $uni-text-color;
      font-size: $uni-font-size-sm;
      margin-top: 8rpx;
    }
  }
  .address {
    padding: 24rpx;
    box-sizing: border-box;
    margin-top: 16rpx;
    position: relative;
    justify-content: flex-start;
    border-radius: 8rpx;
    .lineBg {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 10rpx;
      width: 100%;
    }
    .addressImg {
      width: 46rpx;
      height: 48rpx;
      flex-shrink: 0;
    }
    .address_right {
      color: $uni-text-color;
      font-size: 22rpx;
      margin-left: 28rpx;
      view {
        font-size: $uni-font-size-base;
        font-weight: bold;
        margin: 12rpx 0rpx;
      }
    }
  }
  .itemShop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 16rpx;
    box-sizing: border-box;
    image {
      width: 176rpx;
      height: 176rpx;
      margin-right: 24rpx;
      flex-shrink: 0;
    }
    .shopInfo {
      width: 100%;
      .title {
        color: $uni-text-color;
        font-size: $uni-font-size-base;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
      }
      .code {
        color: $uni-text-color-tips;
        font-size: $uni-font-size-sm;
        margin-top: 8rpx;
      }
      .price {
        display: flex;
        justify-content: space-between;
        margin-top: 8rpx;
        color: $uni-text-color-tips;
        .speci {
          display: flex;
          font-size: $uni-font-size-base;
          .points-num {
            color: $uni-orange;
            font-weight: bold;
          }
          .points-unit{
            font-size: $uni-font-size-base;
          }
        }
        .buyyer-count{
          font-size:  $uni-font-size-sm;
        }
      }
    }
  }
  .flexBox {
    display: flex;
    align-content: center;
    align-items: center;
  }
  .btn-box {
  .btn{
    width: 220rpx;
    margin: 48rpx 12rpx 0;
    height: 72rpx;
    line-height: 72rpx;
    font-size: $uni-font-size-base;
    display: inline-block;
    color: $uni-text-color;
  }
  .cancel-btn{
    margin-right: 36rpx;
    background: $uni-bg-color;
  }
  .confirm-btn{
    color: #fff;
    background: $uni-orange;
    padding:0 24rpx;
    border: 0;
  }
}
}
</style>
